<template>
  <el-card class="box-card231">
    <template #header>
      <div class="card-header">
        <el-icon color="#F56C6C"><Message /></el-icon>
        &nbsp;
        <span style="color: #f56c6c">项目通知</span>
      </div>
    </template>
    <el-scrollbar height="150px">
      <div
        v-if="tableData.length > 0"
        v-for="(item, index) in tableData"
        :key="index"
        class="el_row_bottom"
        style="
          width: 100%;
          background: #faf9fe;
          border: 2px solid #faf9fe;
          border-radius: 5px;
        "
      >
        <el-row style="height: 100%">
          <el-col :span="1">
            <div
              style="
                width: 5px;
                height: 100%;
                background: #f56c6c;
                border-radius: 5px 0px 0px 5px;
              "
            ></div>
          </el-col>
          <el-col :span="23">
            <el-row style="margin-top: 5px">
              <el-col :span="23">
                <span style="color: #909399; font-size: 13px; line-height: 1.7"
                  >日期：{{ item.publish_time }}</span
                >
              </el-col>
              <el-col :span="1"><div class="cireitmep"></div></el-col>
            </el-row>
            <el-row>
              <el-text
                class="text-line-clamp"
                style="color: #6b6d71; font-size: 12px; line-height: 1.7"
              >
                {{ item.content }}
              </el-text>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div
        v-else
        style="
          color: #ccc;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
        "
      >
        暂无公告通知
      </div>
    </el-scrollbar>
  </el-card>
</template>

<script setup>
import { Message } from "@element-plus/icons-vue";
import { onMounted, ref, watch } from "vue";
import { GetPublishProjectNotices } from "../../../api/project";
let props = defineProps(["proj_oid"]);

let tableData = ref([]);

let getTableData = async (data) => {
  let res = await GetPublishProjectNotices(data);
  tableData.value = res;
};

watch(
  () => props.proj_oid,
  () => {
    getTableData({ proj_oid: props.proj_oid });
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.el_row_bottom {
  margin-bottom: 10px;
}
.el_row_bottom:last-of-type {
  margin-bottom: 0px;
}
.hober {
  cursor: pointer;
}
.hober:hover {
  color: rgb(34, 171, 249);
  text-decoration: underline;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 17px;
  span {
    // background-color: aqua;

    border-radius: 4px;

    font-weight: 600;
  }
}

.project-info {
  display: flex;
  font-size: 14px;

  flex-direction: column;
  .project-info-item {
    margin-bottom: 10px;
  }
}

.box-card231 {
  width: 19%;
  ::v-deep(.el-card__body) {
    padding: 5px;
  }
}
</style>
